<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/12/2
  Time: 19:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.css">
    <style type="text/css">
        body {
            background: url(${pageContext.request.contextPath}/images/t.jpg) no-repeat;
        }

        .yzm {
            display: block;
            width: 100px;
            height: 40px;
            line-height: 40px;
            font-size: 24px;
            cursor: pointer;
            background: #ddd;
            text-align: center;
            border-radius: 4px;
            letter-spacing: 4px;
        }

        .login {
            width: 500px;
            padding: 20px;
            /*position: fixed;*/
            position: absolute;
            left: 50%;
            top: 50%;
            /*margin-left: -250px;
                        margin-top: -250px;*/
            transform: translateX(-50%) translateY(-50%);
            background: rgba(255, 255, 255, 0.5);
            border-radius: 4px;
            box-shadow: 5px 5px 20px #444444;
        }

        .login h3 {
            margin-bottom: 30px;
        }
        .back{
        	position: relative;
					top: 10px;
        }
    </style>
</head>
<body>
<div class="login">
    <h3 class="text-center text-muted">用户注册中心</h3>
    <form:form modelAttribute="user" class="form-horizontal" method="post" action="${pageContext.request.contextPath}/user/register">

        <div class="form-group">
            <label for="loginId" class="sr-only">用户名/账号：</label>
            <div class="input-group">
                <form:input type="text"  class="form-control input-lg" id="loginId" path="loginId"
                       placeholder="账号ID"/>
                <div class="input-group-addon">
                    <span class="glyphicon glyphicon-user"></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="loginId" class="sr-only">昵称：</label>
            <div class="input-group">
                <form:input type="text"  class="form-control input-lg" id="userName" path="userName"
                            placeholder="昵称"/>
                <div class="input-group-addon">
                    <span class="glyphicon glyphicon-user"></span>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="password" class="sr-only">密码：</label>
            <div class="input-group">
                <form:password class="form-control input-lg" id="password" path="password"
                       placeholder="密码"/>
                <div class="input-group-addon">
                    <span class="glyphicon glyphicon-edit"></span>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="phone" class="sr-only">手机号码：</label>
            <div class="input-group">
                <form:input type="text" class="form-control input-lg" id="phone" path="phone"
                       placeholder="手机号码"/>
                <div class="input-group-addon">
                    <span class="glyphicon glyphicon-earphone"></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="eMail" class="sr-only">邮箱：</label>
            <div class="input-group">
                <form:input class="form-control input-lg" id="eMail" path="eMail"
                       placeholder="邮箱"/>
                <div class="input-group-addon">
                    <span class="glyphicon glyphicon-envelope"></span>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="row">
                <div class="col-md-8">
                    <input type="text" class="form-control input-lg" id="yzm"
                           placeholder="填写验证码">
                </div>
                <div class="col-md-4">
                    <span class="yzm">1234</span>
                </div>
            </div>
        </div>

        <button type="submit" class="btn btn-info btn-block btn-lg">注册</button>
        <%--    取出所有验证错误--%>
        <form:errors path="*"/>
    </form:form>
    <p align="center"><a href="${pageContext.request.contextPath}/">back up one level</a></p>
</div>
</body>
<script src="${pageContext.request.contextPath}/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</html>
